<template>
  <!-- 普通索引列表布局 -->
  <view style="width: 100%">
    <template v-if="menuList.length > 0">
      <mxp-index-list
        :height="menuHeight"
        :list="menuList"
        :multiple="isMultiple"
        :uncheck="uncheck"
        :modelValue="defaultValue"
        :themeColor="activeColor"
        titlePadding="8px 4px"
        :showSelectedIcon="true"
        :titleFontSize="itemFontSize"
        :titleBackground="background"
        childListBorderRadius="6px"
        childListPadding="10px 10px"
        :childItemFontSize="itemFontSize"
        :childItemColor="inactiveColor"
        :childListBackground="itemBackground"
        childItemPadding="6px 0px"
        labelKey="label"
        valueKey="value"
        @change="subItemClick"
      ></mxp-index-list>
    </template>
    <template v-else>
      <view style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%" :style="{ height: menuHeight }">
        <image src="../../mxp-tool/static/images/global-state/not-data.svg" style="width: 120px; height: 120px" mode="scaleToFill"></image>
        <view>
          <text style="font-size: 14px" :style="{ color: inactiveColor }">暂无可选数据</text>
        </view>
      </view>
    </template>
  </view>
</template>

<script lang="ts" setup>
  import MxpIndexList, { type $IndexListChange } from '@/mxp-ui/mxp-index-list/mxp-index-list.vue';
  import type { $AllColorStr, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import type { PropType } from 'vue';

  import type { $TrimDropDownMultipleListLevel1Item } from './type';
  defineOptions({
    name: 'item-type6',
  });

  defineProps({
    /** 是否可以取消选中 (为 false 时 选中后再次点击 可以取消选中) */
    uncheck: { type: Boolean, required: true },
    /** 是否为多选 */
    isMultiple: { type: Boolean, required: true },
    /** 每一项的筛选数据 */
    menuList: { type: Object as PropType<$TrimDropDownMultipleListLevel1Item[]>, required: true },
    /** 未选中颜色 */
    inactiveColor: { type: String as PropType<$AllColorStr>, required: true },
    /** 选中颜色颜色 */
    activeColor: { type: String as PropType<$AllColorStr>, required: true },
    /** 筛选列表的高度 */
    menuHeight: { type: String as PropType<$SizeUnitStr>, required: true },
    /** 背景色 */
    background: { type: String as PropType<$AllColorStr>, required: true },
    /** 筛选 列表的每一项 的文字大小 */
    itemFontSize: { type: String as PropType<$SizeUnitStr>, required: true },
    /** 筛选列表每一项的背景色（仅针对 type为 2，3,7 有效） */
    itemBackground: { type: String as PropType<$AllColorStr>, required: true },
    /** 默认选中 */
    defaultValue: { type: [Array, Object] as PropType<Record<number | string, unknown[]> | unknown[] | undefined>, default: undefined },
  });

  const emits = defineEmits<{
    (e: 'click', item: $TrimDropDownMultipleListLevel1Item, menuIndex: number): void;
  }>();

  /** 点击事件 */
  function subItemClick(data: $IndexListChange) {
    emits('click', data.currInfo.item, data.currInfo.index);
  }
</script>
